<template>
  <div class="msgCenter">
    <div class="msg_list">
        <div class="msg_item"
            v-for="(item,index) in msgList">
            <div class="icon">
                <i :class="['iconfont',item.icon]"></i>
            </div>
            <div class="content">
                <icell>
                    <b slot="left" class="content_title">{{item.title}}</b>
                    <div slot="left">{{item.content}}</div>
                    <div slot="right">{{item.timestamp}}</div>
                </icell>
            </div>
        </div>
    </div>
    <div class="history">历史消息 ></div>
  </div>
</template>

<script>
    import icell from '@/components/common/icell'
    export default {
        name:'msgCenter',
        data(){
            return{
                msgList:[
                    {
                        icon:'icon-qiche-copy-copy',
                        title:'德菁专车',
                        content:'注册专车车主',
                        timestamp:'14:20'
                    },
                    {
                        icon:'icon-qiche-copy-copy',
                        title:'德菁专车',
                        content:'注册专车车主',
                        timestamp:'14:20'
                    },
                    {
                        icon:'icon-qiche-copy-copy',
                        title:'德菁专车',
                        content:'注册专车车主',
                        timestamp:'14:20'
                    },
                ]
            }
        },
        components:{
            icell
        }
    }
</script>

<style lang="scss" scoped>
    @import '../../../style/var.scss';
    .msgCenter{
        width: 100%;

        .msg_list{
            
        }
        .msg_item{
            display: flex;
            align-items: center;
            padding:10px 35px;
            box-shadow: 0 1px 0 0 $border_base;
            .icon{
                circle:130px transparent;
                border:1px solid $border_base;
                text-align: center;
                line-height: 130px;
                .iconfont{font-size: 25px;color:$primary;}
            }
            .content{
                flex-grow:1;
            }
            .content_title{
                color:$font_color_primary;
                font-size: 18px;
            }

        }
        .history{
            text-align: center;
            line-height: 150px;
            color:$font_color_sub;
        }
    }
</style>

